<script setup lang="ts">
import { ref, reactive, defineProps, defineEmits, computed } from 'vue'
import { useTable } from '@/composeAPI/useTable.ts'
const { state: config, getTableData } = useTable()

const props = defineProps({
    small: {
        type: Boolean,
        default: false
    },
    disabled: {
        type: Boolean,
        default: false
    },
    layout: {
        type: String,
        default: 'total, sizes, prev, pager, next'
    },
    currentPage: {
        type: Number,
        default: () => 1
    },
    pageSize: {
        type: Number,
        default: () => 10
    },
    total: {
        type: Number,
        default: () => 100
    },
    pageSizes: {
        type: Array,
        default: () => [20, 30, 40, 50]
    },
    pagerCount: {
        type: Number,
        default: () => 7
    },
    align: {
        type: String,
        default: () => 'right'
    },
})
const align = computed(() => {
    let data = ''
    switch (props.align) {
        case 'left':
            data = 'justify-start'
            break
        case 'center':
            data = 'justify-center'
            break
        case 'right':
            data = 'justify-end'
            break
    }
    return data
})
const emit = defineEmits(['changeSize', 'changeCurrent'])
const handleSizeChange = (val: number) => {
    emit('changeSize', val)
}
const handleCurrentChange = (val: number) => {
    emit('changeCurrent', val)
}
</script>   

<template>
    <div :class="align">
        <el-pagination :current-page="props.currentPage" :page-size="props.pageSize" :page-sizes="props.pageSizes"
            :small="props.small" :disabled="props.disabled" :background="false" :layout="props.layout" :total="props.total"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" :pager-count="props.pagerCount" />
    </div>
</template>

<style scoped></style>